<template>
	<div class="login"> 
		<div class="hd"> 
			<i class="icon iconfont icon-chushimao"></i> 
		</div> 
		<div class="main"> 
			<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm"> 
				<el-form-item label="用户名" prop="username"> 
					<el-input type="text" v-model="ruleForm2.username" auto-complete="off"></el-input>
				</el-form-item> 
				<el-form-item label="密码" prop="pass"> 
					<el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item align="center" id="btn"> 
					<el-button type="primary" @click="submitForm()">提交</el-button>
					<el-button @click="resetForm('ruleForm2')">重置</el-button>
				</el-form-item> 
			</el-form> 
			<div class="bottom-bar"> 
				<p>吃了么点餐系统隶属于格莱科技旗下产品，最终解释权属于本公司。<br>还没账号请<a href="javascript:void(0)" @click="jumpReg">点击注册</a></p> 
			</div> 
		</div> 
	</div> 
</template>

<script>
	export default{
		data() { 
			var validateUser = (rule, value, callback) => { // 验证用户名
				if (value === '') { 
					callback(new Error('请输入用户名')); 
				}
			};
			var validatePass = (rule, value, callback) => { // 验证密码 
				if (value === '') {
					callback(new Error('请输入密码')); 
				} 
			};
			return { 
				ruleForm2: { 
					username: '',
					pass: '' 
				}, 
				rules2: { 
					username: [ 
					    { validator: validateUser, trigger: 'blur' }
					], 
					pass: [ 
					    { validator: validatePass, trigger: 'blur' }
					] 
				}
            };
        }, 
        methods:{
        	submitForm() { // 提交功能
        		if (this.ruleForm2.username=="" || this.ruleForm2.pass=="") {
        			this.$message.error('信息不完整!'); 
        		} else {
        			this.$http.post('/login',{ // 发送服务端请求
        				username:this.ruleForm2.username, 
        				password:this.ruleForm2.pass 
        			})
        			.then((response)=>{
        				if (response.data.errCode!=0) { 
        					this.$message.error(response.data.errMsg)
    					} else { 
    						this.$message(response.data.errMsg) 
    						localStorage.setItem('tokenID',response.data.tokenID) // 保存tokenID 
    						localStorage.setItem('userName',this.ruleForm2.username)
    						this.$router.push('/pos') // 提交成功后，跳转至点餐界面 
    					}
    				}) 
					.catch((error)=>{ // 提交失败，提示网络问题 
						this.$message.error("网络问题，请稍候连接。") 
						console.log(error) 
					}) 
    		    } 
        	},
        	resetForm(formName) { //重置
        		this.$refs[formName].resetFields();
        	}, 
        	jumpReg(){  //跳转至注册页面
        		this.$router.push('reg')
            }

        }
	}
</script>

<style scoped>
	.el-form-item{
		padding: 0 275px;
	}
	.bottom-bar{
		text-align: center;
		margin-top: 50px;
	}
    .icon{
    	font-size: 80px;
    	color: #ff9800;
    }
    .hd{
    	text-align: center;
    	margin:30px 0;
    }
    p{
    	line-height: 2em;
    }
    p a{
    	text-decoration:underline;
    }
</style>